<template>
    <div>
        <div style="padding: 10px">
            <van-row gutter="10">
                <van-col span="7">
                    <van-field
                        v-model="province.name"
                        readonly
                        right-icon="arrow-down"
                        placeholder="所有省份"
                        @click='province.show = true'
                    />
                </van-col>
                <van-col span="7">
                    <van-field
                        v-model="city.name"
                        readonly
                        right-icon="arrow-down"
                        placeholder="所有市"
                        @click='city.show = true'
                    />
                </van-col>
                <van-col span="7">
                    <van-field
                        v-model="area.name"
                        readonly
                        right-icon="arrow-down"
                        placeholder="所有区"
                        @click='area.show = true'
                    />
                </van-col>
                <van-col span="3">
                    <van-button icon="search" size="small" type="primary" @click="getList()" />
                </van-col>
            </van-row>
            <van-action-sheet v-model="province.show" :actions="province.list" close-on-click-action @select="(val) => onSelectDstrict('province', val)" />
            <van-action-sheet v-model="city.show" :actions="city.list" close-on-click-action @select="(val) => onSelectDstrict('city', val)" />
            <van-action-sheet v-model="area.show" :actions="area.list" close-on-click-action @select="(val) => onSelectDstrict('area', val)" />
            <van-area title="标题" :area-list="areaList" />
        </div>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import { DstrictList } from '@/api/task'

export default {
    data(){
        return {
            province: {
                show: false,
                list: [],
                name: undefined
            },
            city: {
                show: false,
                list: [],
                name: undefined
            },
            area: {
                show: false,
                list: [],
                name: undefined
            }
        }
    },
    computed: {
        search(){
            return this.Search()
        },
        pagination(){
            return this.Pagination()
        }
    },
    methods: {
        async getDstrict(type, pid){
            let { data } = await DstrictList({ pid });
            this[type]['list'] = data || []
            this[type]['list'].unshift({ id: undefined, name: '全部' })
        },
        onSelectDstrict(type, val){
            let { id, name } = val
            this.search[type] = id
            this[type]['name'] = name
            if(type === 'province'){
                this.getDstrict('city', id)
            }else if(type === 'city'){
                this.getDstrict('area', id)
            }
        },
        getList(){
            this.pagination.pageNo = 1
            this.pagination.finished = false
            this.GetList()
        }
    },
    created(){
        this.getDstrict('province')
    },
    inject: ['Search', 'Pagination', 'GetList']
}
</script>

<style lang="scss" scoped>
::v-deep{
    .van-cell{
        // background-color: rgba(0,0,0,.1);
        border-radius: .2rem;
        padding: 0.08rem 0.42667rem;
        font-size: .30rem;
        border: 0.02rem solid #ccc;
    }
}
</style>